<script setup>
import { useRecorder } from '@/hooks/useAudio.js'

const {
    isRecording,
    audioData,
    error,
    startRecording,
    stopRecording,
    playRecording,
    downloadRecording
} = useRecorder()
</script>

<template>
    <div class="audio-recorder">
        <div class="recording-status">
            <div class="status-indicator" :class="{ active: isRecording }">
                <span class="dot"></span>
                <span class="text">{{ isRecording ? '录音中...' : '未录音' }}</span>
            </div>
        </div>
        
        <div class="controls">
            <button 
                class="control-btn" 
                :class="{ active: isRecording }"
                @click="startRecording" 
                :disabled="isRecording"
            >
                <i class="fas fa-microphone"></i>
                开始录音
            </button>
            
            <button 
                class="control-btn stop" 
                @click="stopRecording" 
                :disabled="!isRecording"
            >
                <i class="fas fa-stop"></i>
                停止录音
            </button>
            
            <button 
                class="control-btn play" 
                @click="playRecording" 
                :disabled="!audioData"
            >
                <i class="fas fa-play"></i>
                播放录音
            </button>
            
            <button 
                class="control-btn download" 
                @click="downloadRecording" 
                :disabled="!audioData"
            >
                <i class="fas fa-download"></i>
                下载录音
            </button>
        </div>

        <div v-if="error" class="error-message">
            <i class="fas fa-exclamation-circle"></i>
            {{ error }}
        </div>

   
    </div>
</template>


<style scoped>
.audio-recorder {
    padding: 20px;
    border-radius: 8px;
    background: #f5f5f5;
}

.recording-status {
    margin-bottom: 20px;
    text-align: center;
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
}

.status-indicator.active .dot {
    background: #ff4444;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.controls {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.control-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s;
}

.control-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.control-btn.active {
    background: #ff4444;
    color: white;
}

.control-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.error-message {
    margin-top: 20px;
    padding: 10px;
    border-radius: 4px;
    background: #fff3f3;
    color: #ff4444;
    display: flex;
    align-items: center;
    gap: 8px;
}
</style>